<template>
  <!--复选框 单选框 验证 -->
  <div id="app">
    <Form v-slot="{ values }" :validation-schema="schema" @submit="onSubmit">
      <Field name="drink" type="checkbox" value="Water" /> Water
      <Field name="drink" type="checkbox" value="Tea" /> Tea
      <Field name="drink" type="checkbox" value="Coffee" /> Coffee

      <ErrorMessage
        as="p"
        class="animate__animated animate__bounce mt-1 text-sm text-red-500"
        name="drink"
      />

      <button>Submit</button>

      <p>Values</p>
      <pre>{{ values }}</pre>
    </Form>
  </div>
</template>

<script setup lang="ts">
import { ErrorMessage, Field, Form } from 'vee-validate';

import 'animate.css';

const schema = {
  drink: () => {
    if (value && value.length > 0) {
      return true;
    }

    return 'You must choose a drink';
  },
};

function onSubmit() {}
</script>
